<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>不同操作系统用户页面浏览偏好</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <style>
        .chart-container {
            max-width: 1000px;
            margin: 2rem auto;
            padding: 1.5rem;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body class="bg-gray-50">
<div class="chart-container">
    <h2 class="text-xl font-bold mb-4">不同操作系统用户页面浏览偏好（主页/列表页/产品页）</h2>
    <div class="h-96">
        <canvas id="osPageChart"></canvas>
    </div>
</div>

<script>
    // 准确数据：各操作系统页面浏览占比（主页/列表页/产品页）
    const osPageData = [
        { os: "Android", home: 0.44592389530709486, listing: 0.3333333333333333, product: 0.22074277135957182 },
        { os: "iOS", home: 0.44775651574278685, listing: 0.33007350290720455, product: 0.22216998135000862 },
        { os: "其他系统", home: 0.44016227180527384, listing: 0.332657200811359, product: 0.22718052738336714 },
        { os: "Other", home: 0.45095851506237955, listing: 0.32761943401967747, product: 0.221422050917943 },
        { os: "Linux", home: 0.4537461773700306, listing: 0.3237767584097859, product: 0.22247706422018348 },
        { os: "macOS", home: 0.4452775174424659, listing: 0.330990315526398, product: 0.2237321670311361 },
        { os: "Windows", home: 0.4483221881745588, listing: 0.32917717028695637, product: 0.22250064153848476 }
    ];

    // 转换为百分比（保留2位小数）
    const formatPercent = (value) => (value * 100).toFixed(2);

    document.addEventListener("DOMContentLoaded", () => {
        new Chart(document.getElementById("osPageChart"), {
            type: "bar",
            data: {
                labels: osPageData.map(item => item.os),
                datasets: [
                    {
                        label: "主页占比 (%)",
                        data: osPageData.map(item => formatPercent(item.home)),
                        backgroundColor: "#2563EB",
                        borderColor: "#2563EB"
                    },
                    {
                        label: "列表页占比 (%)",
                        data: osPageData.map(item => formatPercent(item.listing)),
                        backgroundColor: "#F97316",
                        borderColor: "#F97316"
                    },
                    {
                        label: "产品页占比 (%)",
                        data: osPageData.map(item => formatPercent(item.product)),
                        backgroundColor: "#10B981",
                        borderColor: "#10B981"
                    }
                ]
            },
            options: {
                responsive: true,
                indexAxis: "y", // 横向柱状图，便于展示操作系统名称
                scales: {
                    x: {
                        stacked: true,
                        max: 100,
                        ticks: { callback: v => v + "%" },
                        title: { display: true, text: "浏览占比" }
                    },
                    y: {
                        stacked: true,
                        title: { display: true, text: "操作系统" }
                    }
                },
                plugins: {
                    tooltip: {
                        callbacks: { label: l => `${l.dataset.label}: ${l.raw}%` }
                    },
                    legend: { position: "top" }
                },
                animation: { duration: 2000, easing: "easeOutQuart" }
            }
        });
    });
</script>
</body>
</html>